import React,{ PureComponent } from 'react'
import { connect } from 'react-redux'
import { ArcWrapper, Arc, ArcLeft, ArcRight, LoadMore} from '../styled'
import { actionCreater } from '../store'
import { Link } from 'react-router-dom'

class ArcList extends PureComponent{
    render(){
        const { loadMoreArc, currArcPage } = this.props
        return <div>
            <ArcWrapper>
                { this.props.arcList.map((item)=>{
                    return <Arc key={item.get('id')}>
                        <ArcLeft >
                            <Link to={'/detail/' + item.get('id')} className='link'>
                                <div className='title'>
                                    {item.get('title')}
                                </div>
                                <div className='desc'>
                                    {item.get('desc')}
                                </div>
                            </Link>
                            <div className='arc-bottom'>
                                <a href="/" className='writer'>
                                    {item.get('writer')}
                                </a>
                                <a href="/" className='comment'>
                                    <i className="iconfont">&#xe6c7;</i>
                                    {item.get('comment')}
                                </a>
                                <span className='like'>
                                <i className="iconfont">&#xe79d;</i>
                                    {item.get('like')}
                            </span>
                            </div>
                        </ArcLeft>
                        <ArcRight>
                            <img
                                className='arc-pic'
                                src="https://upload-images.jianshu.io/upload_images/12631447-8492ac37e97bec00.png?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"
                                alt=""
                            />
                        </ArcRight>
                    </Arc>
                })}
            </ArcWrapper>
            <LoadMore onClick={()=>loadMoreArc(currArcPage)}>
                阅读更多
            </LoadMore>
        </div>
    }
}
const mapStateToProps = (state) =>{
    return {
        arcList: state.get('home').get('arcList'),
        currArcPage: state.get('home').get('currArcPage')
    }
}
const mapDispatch = (dispatch) => ({
    loadMoreArc(currArcPage){
        dispatch(actionCreater.loadMoreArc(currArcPage))
    }
})

export default connect(mapStateToProps,mapDispatch)(ArcList)
